<template>
  <el-dialog
    width="70%"
    :title="$i18n.locale === 'zh-cn' ? area.areaCNName : area.areaENName"
    v-model="dialogFieldInfoVisible"
  >
    <table-componets-vue
      ref="dialogFieldInfo"
      :Sizes="sizes"
      :layout="layout"
      @PageChange="PageChange"
      :currentPage="query.page"
      :pageSize="query.pageSize"
      :loading="tableLoading"
      :isQuery="1 == 1"
      :tables="tables"
      :maxheight="320"
      :Select="'MultiSelect'"
    ></table-componets-vue>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          :size="'small'"
          type="danger"
          icon="el-icon-back"
          @click="
            dialogFieldInfoVisible = false;
            initList();
          "
          >{{ $t("table.Global_Cancel") }}</el-button
        >
        <el-button
          :size="'small'"
          type="primary"
          icon="el-icon-check"
          @click="confirm"
          >{{ $t("table.Global_Save") }}</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script>
import reqVue from "../../utils/req.vue";
import TableComponetsVue from "../TableComponets.vue";
import confVue from "../../utils/conf.vue";
export default {
  emits: ["confirmEvent"],
  data() {
    return {
      dialogFieldInfoVisible: false,
      tableLoading: false,
      tables: {},
      sizes: confVue.$size,
      layout: confVue.$layout,
      query: {
        page: 0,
        pageSize: 15,
      },
      paramters: {},
      primaryKeyValue: "",
      area: {},
    };
  },
  components: { TableComponetsVue },
  methods: {
    InitTable(queryModel) {
      this.tableLoading = true;
      if (queryModel != undefined && queryModel != null) {
        this.query = queryModel;
      } else {
        this.initList();
        this.query = {};
        this.query.page = 1;
        this.query.pageSize = 15;
      }
      this.tables = [];
      this.query.paramters = [];
      this.query.paramters.push({
        label: "tablecode",
        value: this.primaryKeyValue,
      });
      this.query.exceptDataField = [];
      this.query.exceptDataField.push({
        label: "fieldcode",
        value: "empid",
      });

      this.query.useDisabledData = false;
      reqVue.$Post(this.query, "field/v1.0/pages", "business").then(
        function(data) {
          if (data.status) {
            data.body.operations = [];
            this.tables = data.body;
            this.$nextTick(function() {
              this.$refs.dialogFieldInfo.InitCheckBox(
                this.paramters.data,
                "fieldCode"
              );
            });
            this.tableLoading = false;
          } else {
            this.$message.error(data.message);
          }
        }.bind(this)
      );
    },
    PageChange(queyModel) {
      this.InitTable(queyModel);
    },
    confirm() {
      let results = this.$refs.dialogFieldInfo.tableResult;
      let pers = [];
      results.forEach((element) => {
        pers.push({
          areaId: this.area.areaId,
          autoId: element.autoId,
          cnName: element.fieldName,
          tableName: element.cnName,
          controlsType: element.controlStype,
          controlSouces: element.controlSouces,
          defaultValue: element.defaultValue,
          editor: true,
          enName: element.fieldENName,
          fieldCode: element.fieldCode,
          fLength: element.fieldLength,
          fieldKey:
            this.area.areaCode +
            "$" +
            this.primaryKeyValue +
            "$" +
            element.fieldCode,
          min: 0,
          max: 9999,
          precisions: element.precisions,
          required: element.isRequired,
          selectType: element.selectType,
          sequence: element.sequence,
          show: element.enable,
          type: element.fieldType,
          usable: element.enable,
        });
      });
      this.$emit("confirmEvent", {
        key: this.area.areaCode,
        result: pers,
      });
      this.initList();
      this.dialogFieldInfoVisible = false;
    },
    initList() {
      this.$nextTick(function() {
        this.$refs.dialogFieldInfo.dels = [];
        this.$refs.dialogFieldInfo.curs = [];
        this.$refs.dialogFieldInfo.tableResult = [];
      });
    },
  },
};
</script>
